<template>
  <q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading || list.length == 0">
      <q-spinner-gears size="50px" color="primary" v-if="loading"></q-spinner-gears>
      <b v-if="!loading && list.length==0" class="text-primary">暂无约稿项目</b>
      <b v-if="loading" class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <q-list separator class="q-mt-md q-pa-none" :no-border="$q.platform.is.mobile" v-if="list.length > 0">      
      <q-item v-for="item in list" :key="'latest'+item.id" :to="'/project/' + item.projectId">
        <q-item-main>
          <q-item-tile label>{{ item.movieName }}</q-item-tile>
          <q-item-tile sublabel><q-icon name="mdi-calendar-clock"/> {{item.projectDate}}</q-item-tile>          
        </q-item-main>
        <q-item-side right>
          共 <b>{{item.articleCount}}</b> 篇
        </q-item-side>
        <q-item-side right icon="mdi-chevron-right" />
      </q-item>
    </q-list>

    <!-- create new -->
    <q-btn round color="primary" class="fixed" icon="add" size="lg"
      style="right: 15px; bottom: 15px" @click="$router.push('/project/0')" />
    
  </q-page>
</template>

<script>
export default {
  name: 'PageIndexProject',
  data() {
    return {
      loading: true,
      list: []
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '约稿项目管理';
    this.loadProjects();
  },
  methods: {
    loadProjects() {
      let me = this;
      this.$api.project.loadProjects(res=>{
        me.list = res.data.model;
        me.loading = false;
      });
    }
  }
}
</script>